<template>
    <div class="all">
        <home></home>
        <notice class="top-notice"></notice>
        <div class="search-wrapper">
            <search class="sou"></search>
        </div>
        <div class="center-all">
            <sidebar></sidebar>
            <carousel class="pict"></carousel>
        </div>
        <div class="middle">
      <central></central>
    </div>
    <div class="middle-bottom">
      <div class="container">
        <div class="pic"><img src="//static06.yuanling.com/eplat/static/2020_12_29_02/img/home-recruit1.6a4d7e3.png" alt="" width="70" height="60">
          <div class="pic-right">
            <div class="title">7天无忧试用</div>
            <div class="desc">对每个服务提供7天试用，不满意<br>可以免费更换人才</div>
          </div>  
        </div>
        <div class="pic"><img src="//static06.yuanling.com/eplat/static/2020_12_29_02/img/home-recruit2.c33127d.png" alt="" width="70" height="60">
          <div class="pic-right">
            <div class="title">远程工作追踪</div>
            <div class="desc">圆领工作者在履约期间按天打卡并汇报<br>工作交付，确保工作成果可被追踪</div>
          </div>  
        </div>
        <div class="pic"><img src="//static06.yuanling.com/eplat/static/2020_12_29_02/img/home-recruit3.38a429b.png" alt="" width="70" height="60">
          <div class="pic-right">
            <div class="title">灵活支付</div>
            <div class="desc">圆领提供月结的付款方式，企业在工作<br>者服务一个周期后才会付款</div>
          </div>  
        </div>
        
      </div>
    </div>
    <div class="footer">
      <foot></foot>
    </div>
    </div>
</template>

<script>
import home from "@/components/index/home.vue";
import notice from "@/components/index/notice.vue";
import search from "@/components/index/search.vue";
import Sidebar from "@/components/index/sidebar.vue";
// import Carousel from '@/components/index/Carousel.vue';
import central from '@/components/index/central.vue';
import foot from '@/components/index/foot.vue'
import Carousel from "@/components/index/bp_carousel.vue"


export default {
    name:'Firstpage',
    components :{
        home,
        notice,
        search,
        Sidebar,
        Carousel,
        central,
        foot,

    }
}
</script>

<style  scoped>
li{
  list-style-type: none;
}
.all {
  width: 100%;
  height: 1500px;
  background: #F2F5F4;
}
.top-notice{
    background: #eceef2;
}
.search-wrapper{
  background: #eceef2;
  padding: 0px 0 10px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center!important;
}
.center-all{
  width: 1200px;
  margin: 10px auto 0px;
  display: flex;
  justify-content: center;
}
.pict{
    margin: 0 50px;
}
.middle{
  width: 1200px;
  margin: 0px auto;
  display: flex;
  justify-content: center;
}
.middle-bottom{
  width: 100%;
  background: #F2F5F4;
  display: flex;
  justify-content: center;
  margin: 50px auto;

}
.container{
  width: 100%;
  display: flex;
  justify-content: center;
  /* margin: 0 auto; */

}
.pic{
  display: inline-block;
  display: flex;
  justify-content: space-between;
  margin: 0px 120px;
  
}
.pic-right{
  display: inline-block;
  height: 60px;
  padding-left: 10px;
}
.title{
  margin-top: 0px;
  font-size: 18px;
}
.desc{
  font-size: 14px;
  margin-top:5px ;
}
.footer{
  width: 100%;
  background: #ffffff;
  margin: 100px auto 0px;
  display: flex;
  justify-content: center;
}
</style>